import React from 'react'
import {Form, Radio, Input, Button, message, Col, Spin} from 'antd'
import {fetchPost} from '../../../utils/request'

const FormItem = Form.Item


const formItemLayout = {
  labelCol: {
    xs: {span: 8},
    sm: {span: 8}
  },
  wrapperCol: {
    xs: {span: 16},
    sm: {span: 16}
  }
}

class Recharge extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      fundCode: props.fundCode,
      accountName: props.accountName,
      loading: false
    }
  }

  componentWillReceiveProps(props) {
    if (this.state.fundCode !== props.fundCode) {
      this.setState({
        fundCode: props.fundCode,
        accountName: props.accountName
      })
    }
  }

  handleSubmit = e => {
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        // 去除空值
        for (var key in values) {
          if (!values[key]) {
            delete values[key]
          }
        }
        let {amount, bankTransactionNumber} = values
        let params = {
          fundCode: this.state.fundCode,
          amount: amount,
          referenceNo: bankTransactionNumber,
          fundOperationTypeEnum: "ADD"
        }
        this.setState({
          loading: true
        });
        fetchPost('/finance/fund/account/operate', params).then(json => {
          if (json.code === 0) {
            message.info('Success')
            this.props.form.resetFields()
            this.props.onOk()
            this.setState({
              loading: false
            });
          } else {
            this.setState({
              loading: false
            });
            message.error(json.msg)
          }
        })
      }
    })
  }

  render() {
    const {getFieldDecorator} = this.props.form
    return (
      <div>
        <Form horizontal onSubmit={this.handleSubmit}>
          <FormItem  {...formItemLayout} label="Fund Account:">
            <div>{this.state.accountName}</div>
          </FormItem>
          <FormItem  {...formItemLayout} label="FundCode:" style={{display: 'none'}}>
            {getFieldDecorator('merchant', {rules: [{required: true}], initialValue: this.state.fundCode})(<Input
              disabled={true}/>)}
          </FormItem>
          <FormItem  {...formItemLayout} label="Amount:">
            {getFieldDecorator('amount', {rules: [{required: true}]})(<Input/>)}
          </FormItem>
          <FormItem {...formItemLayout} label="Bank Transaction number">
            {getFieldDecorator('bankTransactionNumber')(<Input/>)}
          </FormItem>
          <FormItem {...formItemLayout}>
            <Spin spinning={this.state.loading}>
              <Button type="primary" htmlType="submit" style={{float: 'right'}}>Submit</Button>
            </Spin>
          </FormItem>
        </Form>
      </div>
    )
  }
}

Recharge = Form.create()(Recharge)
export default Recharge
